<template>
	<view class="view-container">
		<view class="view-map-contaier">
			<map
				id="map"
				:latitude="VuexMap.latitude"
				:longitude="VuexMap.longitude"
			></map>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			latitude: 40.013305,
			longitude: 118.685713
			// latitude:31.03241,
			// longitude:121.22654,
		};
	},
	computed: {
		...mapState('m_map', ['VuexMap'])
	},
	onLoad() {},

	onReady() {
		// this.createMap();
		this.Mounted();
	},

	methods: {
		...mapMutations('m_map', ['mutastateMap', 'statewuqi']),
		Mounted() {
			var _sate = this;
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					const obj = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					console.log(obj);
					_sate.mutastateMap(obj);
					uni.openLocation({
						latitude: obj.latitude,
						longitude: obj.longitude,
						success: function() {},
						fail: err => {
							console.log(err);
						}
					});
				}
			});
		},

		createMap() {
			var _sate = this;
			const tMap = new QQMapWX({
				key: 'B5VBZ-2273F-TS7JK-NH62Y-L4B3H-VIFXD'
			});
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				accuracy: true,
				success: function(res) {
					console.log(res);
					const obj = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					console.log(obj);
					_sate.mutastateMap(obj);
					// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
					tMap.reverseGeocoder({
						location: {
							latitude: obj.latitude,
					 	longitude: obj.longitude
						},
						success: function(res) {
							console.log('解析地址成功', res);
					 	console.log('当前地址：', res.result.address);
							//保存缓存
							uni.setStorage({
								key: 'local',
								data: res.result.address,
								success() {
									console.log('用户地址信息已缓存');
								}
							});
						}
					});
					// uni.openLocation({
					// 			latitude: obj.latitude,
					// 			longitude: obj.longitude,
					// 			success: function (res) {
					// 				console.log(res);
					// 			}
					// 		});
					// this.longitude = res?.longitude
					// this.latitude =	res?.latitude
					// that.addrDel = res;
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style scoped>
#map {
	height: 100vh;
	width: 100%;
}
</style>
